<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        /*.item:nth-child(2n-1){
            background: #f6f8f8;
        }
        .item:hover{
            color: #409EFF;
        }
        .el-upload-list--picture .el-upload-list__item{
            width: 200px;
            display: inline-block;
            margin-right: 10px;
        }
        .el-upload-list__item-name{
            margin-right: 0;
        }*/
    </style>
</head>
<body>
<div id="app">
    <p style="border-left: 2px solid #0e90d2;padding-left: 20px;">新建任务</p>
    <hr style="border: 1px solid #ebeef5;"/>
    <div>
        <div>请选择一个 <b class="el-button--text">{{taskName}}</b> 任务</div>
        <div>&nbsp;</div>
        <el-card class="box-card">
            <el-table
                    :data="tableData"
                    style="width: 100%" stripe @cell-click="toEdit">
                <el-table-column
                        prop="taskContent"
                        label="任务内容">
                </el-table-column>
                <el-table-column
                        prop="score"
                        label="积分"
                        width="300" align="right">
                    <template slot-scope="scope">
                        可获得{{scope.row.score}}积分
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                taskName: sessionStorage.getItem("taskName"),
                tableData: [{
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '给客户打电话',
                    progress: '0%',
                    tag: '已逾期',
                    state: 0,
                    score: 20
                }, {
                    date: '2016-05-04',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '20%',
                    tag: '待处理',
                    state: 1,
                    score: 30
                }, {
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '50%',
                    tag: '已逾期',
                    state: 0,
                    score: 50
                }, {
                    date: '2016-05-03',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '0%',
                    tag: '待处理',
                    state: 1,
                    score: 20
                }, {
                    date: '2016-05-03',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '0%',
                    tag: '待处理',
                    state: 1,
                    score: 20
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            taskSave: function (event) {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'edit_task.html');
            },
            handleNodeClick: function (data, event) {
                console.log(data);
                if (event.data.noChildren) {
                    this.form.name = data.label;
                }
            },
            handleRemove: function (file, fileList) {
                console.log(file, fileList);
            },
            handlePreview: function (file) {
                console.log(file);
            },
            toEdit: function (row, column, cell, event) {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'edit_task.html');
            }
        }
    })
</script>
</body>
</html>
